<template>
	<div class="coursewareSign w944">
		<alert ref="alert"></alert>
		<div class="label_top">
			<button @click="reBack"><i><&nbsp;</i>返回</button>
			<p>{{courseName}}</p>
		</div>
		<div class="label_table">
			<div class="el-tabs-report">
				<div class="tongji">
					<span><b>{{baomingrenshu}}</b>报名人数</span>
					<span><b>{{yitongguo}}</b>已通过</span>
					<span><b>{{daishenhe}}</b>待审核</span>
				</div>
				<el-select v-model="auditStatus" class="th_2" @change="getTableList">
					<el-option label="审核状态" value=""></el-option>
					<el-option v-for="item in auditStatusOption" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
				<div class="msearch">
					<input placeholder="请输入学员、时间……" v-model="search"/>
					<a @click="getTableList"><img src="../../assets/qudaoImg/search.png"/></a>
				</div>
			</div>
			<el-table ref="multipleTable" :data="tableData" border @selection-change="handleSelectionChange">
				<el-table-column label="序号" width="60">
					<template slot-scope="scope">{{ scope.row.sort}}</template>
				</el-table-column>
				<el-table-column prop="nickname" label="学员名字"></el-table-column>
				<el-table-column prop="status" label="审核状态">
					<template slot-scope="scope">
						<span v-if="scope.row.status==1">待审核</span>
						<span v-if="scope.row.status==2">已通过</span>
						<span v-if="scope.row.status==0">已拒绝</span>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="报名时间"></el-table-column>
				<el-table-column label="操作" width="200"> 
					<template slot-scope="scope">
						<div v-if="scope.row.status==1">
							<el-button @click="handlePass(scope.row)">通过</el-button>
							<el-button @click="handleRefuse(scope.row)" class="red">拒绝</el-button>
						</div>
						<el-button @click="handleRefuse(scope.row)" class="red" v-if="scope.row.status==2">拒绝</el-button>
						<el-button @click="handlePass(scope.row)" v-if="scope.row.status==0">通过</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="fenyeMargin">
				<div class="pag_block">
					<el-pagination @current-change="handleCurrentChange" :current-page="currentpage" :page-size="pagesize" layout="prev, pager, next" :total="total"></el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import alert from '../../components/Alert.vue';
	export default {
		data() {
			return {
				auditStatus:'',
				auditStatusOption:[{
					id:1,
					name:'待审核'
				},{
					id:2,
					name:'已审核'
				},{
					id:0,
					name:'已拒绝'
				}],
				baomingrenshu:'',
				yitongguo:'',
				daishenhe:'',
				search:'',
				sort:'',
				courseid:'',
				liveType:'',//课件组or直播目录
				coursewareId:'', //课程编号id
				courseName:'', //课程名称
				coursewareType:'',//類型
				teacherTitle:'',
				lecturerid:'',
				
				//分页设置
		        pagesize: 15,
		        currentpage: 1,
		        total: 1,
				//分页设置end
				id:'',
				tableData: [],
				multipleSelection: [],
				deleteType:'delete'
			}
		},
		methods: {
			getParams() {
				let that = this;
				// 取到路由带过来的参数
				this.courseName = this.$route.params.courseName;
				this.courseid = this.$route.params.courseid;
				this.coursewareId = this.$route.params.coursewareId;
				this.coursewareType = this.$route.params.coursewareType;
				this.updateTitle = this.$route.params.updateTitle;
				this.liveType = this.$route.params.liveType;
				this.pathKey = this.$route.params.pathKey;
				this.teacherTitle = this.$route.params.teacherTitle;
				this.lecturerid = this.$route.params.lecturerid;
				console.log('sign:',this.$route.params);
			},
			getTableList(){
				let that = this;
				this.$ajax({
					url: this.$root.jifuUrl + "/getCourseLiveBroadcastSignupPage?"+'page='+this.currentpage+'&num='+this.pagesize+'&zbid='+this.courseid+'&status='+this.auditStatus,
					method: 'GET',
					data: {},
					success: res => {
						if(res.data.code == 200) {
							this.tableData = res.data.data.list;
							this.total=res.data.data.pageParam.items;
							for(var i = 0;i<this.tableData.length;i++){
								this.tableData[i].sort=i+1
							}
						}
					}
				});
			},
			getData(){
				let that = this;
				this.$ajax({
					url: this.$root.jifuUrl + "/getCourseLiveBroadcastSignupInfo?"+'zbid='+this.courseid,
					method: 'GET',
					data: {},
					success: res => {
						console.log(res);
						if(res.data.code == 200) {
							that.baomingrenshu = res.data.data.totalCnt;
							that.yitongguo = res.data.data.passCnt;
							that.daishenhe = res.data.data.shzCnt;
						}
					}
				});
			},
			handlePass(row){
				let that = this;
				let s = {
					id:row.id,
					status:2
				};
				this.$ajax({
					url: this.$root.jifuUrl + "/updateCourseLiveBroadcastSignupStatus",
					method: 'POST',
					data: this.qs.stringify(s),
					success: res => {
						if(res.data.code == 200) {
							this.$rootFunction().addResSuccess();
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});
			},
			handleRefuse(row){
				let that = this;
				let s = {
					id:row.id,
					status:0
				};
				this.$ajax({
					url: this.$root.jifuUrl + "/updateCourseLiveBroadcastSignupStatus",
					method: 'POST',
					data: this.qs.stringify(s),
					success: res => {
						if(res.data.code == 200) {
							this.$rootFunction().addResSuccess();
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});
			},
			toggleSelection(rows) {
				if(rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row, !this.allSelect)
					})
					this.allSelect = !this.allSelect;
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = [];
				val.forEach(row => {
					this.multipleSelection.push(row.id);
				});
			},
			handleCurrentChange(value) {
				this.currentpage = value;
				this.getTableList();
			},
			reBack(){
				this.$router.push({
					name: 'liveColumn',
					params: {
						liveId:this.coursewareId,
						updateTitle:this.updateTitle,
						pathKey:this.pathKey,
						teacherTitle:this.teacherTitle,
						lecturerid:this.lecturerid
					}
				})
			}
		},
		components:{
			alert
		},
		mounted: function() {
			this.getParams();
			if(this.courseid==null){
				this.$store.commit('GET_courseSign');
				var s =this.$store.state.courseSign;
				this.courseName=s.courseName;
				this.courseid = s.courseid,
				this.coursewareId=s.coursewareId,
				this.coursewareType=s.coursewareType;
				this.updateTitle = s.updateTitle;
				this.liveType = s.liveType;
				this.pathKey = s.pathKey;
				this.teacherTitle = s.teacherTitle;
				this.lecturerid = s.lecturerid;
			}
			this.getTableList();
			this.getData();
			//刷新前存储数据
			window.addEventListener("beforeunload",()=>{
				s={
					courseName:this.courseName,
					courseid:this.courseid,
					coursewareId : this.coursewareId,
					coursewareType:this.coursewareType,
					updateTitle:this.updateTitle,
					liveType:this.liveType,
					pathKey:this.pathKey,
					teacherTitle:this.teacherTitle,
					lecturerid:this.lecturerid
				}	
				this.$store.commit('SET_courseSign', s);
			});
		}
	}
</script>